/**
 * 代码展示组件
 * 
 * 组件
 * 
 * 组件代码  可收缩 复制
 */

import { Typography, Tooltip, Button } from 'antd';
import { CopyOutlined } from '@ant-design/icons';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { vscDarkPlus, base16AteliersulphurpoolLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
import React, { useState } from 'react'
import style from './index.module.css'

const codeStyle = base16AteliersulphurpoolLight
const { Paragraph } = Typography;
const expand = "https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg"
const unexpand = "https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg"
/**
 * 代码展示组件
 * 
 * @param {object} params 配置对象
 * @param {object} params.comp 元素
 * @param {string} params.code 代码字符串
 * @param {string} params.title 标题
 * @param {string} params.description 描述
 * @param {boolean} params.isOpen 初始代码展开
 * @returns 
 */
export default function CodeDemo({ comp, code, title, description, isOpen = false }) {
    const [open, setOpen] = useState(isOpen)
    return (
        <div className={style.code_demo}>
            {/* 组件展示区 */}
            <div className={style.demo}>{comp}</div>
            {/* 组件信息 */}
            <div className={style.mete}>
                <div className={style.code_title}>{title}</div>
                <div className={style.code_description}>{description}</div>

                <div className={style.tool}>
                    {/* 复制 */}
                    <div className={style.tool_box}>
                        <Paragraph style={{ marginBottom: 0 }} copyable={{ text: code, icon: <CopyOutlined style={{ color: '#787878' }} /> }}></Paragraph>
                    </div>
                    {/* 展示、收缩 */}
                    <Tooltip placement="top" title={open ? "收起" : "展开"}>
                        <div className={style.tool_box} onClick={() => setOpen(!open)}>
                            <img src={open ? expand : unexpand} />
                        </div>
                    </Tooltip> 
                </div>
            </div>
            <div className={style.code_wrapper} style={{ display: open ? 'block' : 'none' }}>
                <SyntaxHighlighter
                    children={String(code).replace(/\n$/, '')}
                    style={codeStyle}
                    language={'jsx'}
                    PreTag="div"
                />
            </div>
        </div>
    )
} 